<template>
  <div class="app-panel" >
    <div class="app-header">
      <h5>锤子应用</h5>
      <div class="more">
        <a href="#">全部应用</a>
        <span>&gt</span>
      </div>
    </div>
    <div class="app-box">
      <ul>
        <li v-for="item in imgUrls">
          <img :src="item.img" alt="">
          <div class="info">
            <h6>{{item.infoh6}}</h6>
            <p>
              <span>{{item.infop1}}</span>
              <span>{{item.infop2}}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="stylus" rel="stylesheet/stylus">
  .app-panel
    margin-top: 30px
    border: 1px solid rgba(0,0,0,.1)
    border-radius: 8px
    overflow: hidden
    background-color: white
    .app-header
      background-color: #fafafa
      line-height 60px
      font-size: 18px
      position: relative
      padding-left: 30px
      position: relative
      .more
        position: absolute
        right: 14px
        top: 0
        font-size: 14px
    .app-box
      ul
        li
          height: 360px
          box-sizing: border-box
          float: left
          width: 25%
          position: relative
          border-top: 1px solid rgba(0,0,0,.1)
          border-right: 1px solid rgba(0,0,0,.1)
          img
            margin-top: 72px
            margin-left: 50%
            position: absolute
            left: -41px
          .info
            position: absolute
            margin-top: 190px
            padding: 0 10px
            top: 0
            text-align: center
            width: 100%
            h6
              font-size: 16px
              line-height: 1.2
              color: #424242
              overflow: hidden
              white-space: nowrap
              text-overflow: ellipsis
            p
              margin-top: 18px
              font-size: 12px
              line-height: 1.2
              color: #b2b2b2
              display: block
              span
                display: block
                margin-top: 6px
</style>
<script>
  export default {
    data () {
      return {
        imgUrls: [
          {
            'img': 'static/imgs/application/pic1.png',
            'infoh6': 'HandShaker',
            'infop1': '在Mac和Windows电脑上也可以方便自如的',
            'infop2': '管理你在Android手机上的内容',
            'platform': ''
          }, {
            'img': 'static/imgs//application/pic2.png',
            'infoh6': '锤子便签',
            'infop1': '雅致的信纸、精心调整的文字排版',
            'infop2': '这可能是最让你想写字的便签应用',
            'platform': ''
          }, {
            'img': 'static/imgs//application/pic3.png',
            'infoh6': '锤子桌面',
            'infop1': '它示范了何为“美观、易用和人性化”',
            'infop2': '',
            'platform': ''
          }, {
            'img': 'static/imgs//application/pic4.png',
            'infoh6': '锤子科技论坛',
            'infop1': '是一个科技论坛 \n',
            'infop2': '不只是科技论坛',
            'platform': ''
          }]
      }
    },
    components: {}
  }
</script>
